<template>
	<view class="page-search">
		<uni-list>
			<uni-list-item
			 v-for="item of list"
			  :key="item._id"
			   :title="item.sender.name" :note="item.sender.email"
				show-extra-icon
				 :extra-icon="{color: '#555555',size: '30',type: 'person'}">
				 <template v-slot:footer>
				 	<view class="list-item-footer">
						<template v-if="item.status == '0'">
							<button class="append-btn confirm" hover-class="confirm-btn-hover" @click="handleClick(item, '1')">加好友</button>
							<button class="append-btn cancel" hover-class="cancel-btn-hover" @click="handleClick(item, '2')">拒绝</button>
						</template>
						<template v-else>
							<text class="append-desc-text">{{ item.status == '1' ? '已同意' : '已拒绝' }}</text>
						</template>
					</view>
				 </template>
				 </uni-list-item>
		</uni-list>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import request from '../../common/request';
	
	onMounted(() => {
		getList()
	})
	
	const list = ref([])
	async function getList() {
		const { code, data } = await request.post('/appendFriendList')
		if (code) {
			console.log(data)
			list.value = data
		}
	}
	
	const handleClick = async (notify: any, status: '1' | '2') => {
		const { code, msg } = await request.post('/confirmAppend', {
			id: notify._id,
			toId: notify.sender._id,
			status
		})
		if (code) {
			uni.showToast({
				title: msg
			})
		}
		list.value = list.value.map(item => {
			if (item._id == notify._id) {
				item.status = status
			}
			return item
		})
	}
</script>

<style lang="scss">
.list-item-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	.append-btn {
		width: 120rpx;
		border-radius: 8rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 20rpx;
		border: 1rpx solid #8296FF;
		outline: none;
		text-align: center;
		font-weight: bold;
		box-sizing: border-box;
		&.confirm {
			background-color: #f0f2ff;
			color: #8296FF;
			border-color: #8296FF;
		}
		&.cancel {
			background-color: #ffbbbb;
			color: #F56C6C;
			border-color: #F56C6C;
		}
	}
	.append-btn + .append-btn {
		margin-left: 12rpx;
	}
	.confirm-btn-hover {
		background-color: #F56C6C;
		color: #ffffff;
	}
	.cancel-btn-hover {
		background-color: #8296FF;
		color: #ffffff;
	}
	.append-desc-text {
		font-size: 22rpx;
		color: #606060;
		font-weight: 500;
	}
}
</style>
